<template>
    <div ref="myDiv" class="image-crop" :style="{ '--position': (posStr || position), 'background-image': `url(${imgSrc})` }" @mouseover="onMouseOver" @mousedown="onMouseDown" @mouseup="onMouseOver" @mouseleave="onMouseLeave" alt="Button">
    </div>
</template>
   
  <script lang="ts" setup>
  const props = defineProps([
    'imgSrc',
    'imgWidth',
    'imgHeight',
    'isState2',
    'posStr'
  ]);

  import { ref } from 'vue';
   
  //const imageSrc = ref(imgSrc); // 图片路径
  const hoverState = ref(false); // 鼠标是否悬停在按钮上
  const buttonState = ref(0); // 按钮的当前状态（0, 1, 2）
  
  const myDiv = ref(null);
  const position = ref("top");

  defineExpose({position});
   
  function toggleState() {
    //buttonState.value = (buttonState.value + 1) % 3; // 循环切换状态
    // myDiv.value.classList.toggle('image-crop2');
  }
  function onMouseOver(){
    if(props.isState2){
      return;
    }
    position.value = "left center";
  }
  function onMouseDown(){
    if(props.isState2){
      return;
      if(position.value == "left bottom"){
        position.value = "left top";
      }
      else{
        position.value = "left bottom";
      }
    }
    else{
      position.value = "left bottom";
    }
  }
  function onMouseLeave(){
    if(props.isState2){
      return;
    }
    position.value = "left top";
  }
   
  // 根据buttonState的值，可以使用CSS切换图片的部分显示
  // 例如，可以在CSS中定义不同状态的背景位置
  </script>
   
  <style scoped>
  /* CSS样式 */
  .image-crop {
    position: relative;
    width: 100%; /* 设置你想要显示的宽度 */
    height: 100%; /* 设置你想要显示的高度 */
    background-position: var(--position); /* 设置背景图片的起始位置 */
    background-size: 100%; /* 设置背景图片的大小，这里是比容器大小多出一倍 */
  }
  </style>